<template>
  <diy-container
    :tabbarIsShow="true"
    :status="'content'"
    :border-bottom="false"
    ref="container"
    title="筛选"
    :headerVisable="true"
    headerBackGroudColor="#ffffff"
  >
    <view class="u-nav-slot" slot="navbarRight" @click="screeningPanelClick">
      <u-icon name="arrow-down" size="19"></u-icon>
    </view>
    <view class="screening-container">
      <u-popup :show="screeningPanel" :closeable="true" class="screeningPanel" :round="10" mode="top" @close="close">
        <view class="screening-content">
          <view class="form">
            <view class="form-item">
              <view class="form-label">年龄</view>
              <view class="form-value">
                <u-slider
                  min="18"
                  max="80"
                  block-color="rgb(255, 102, 129)"
                  v-model="screeningForm.age"
                  activeColor="rgb(255, 102, 129)"
                  inactiveColor="#ebedf0"
                ></u-slider>
                <view class="tips">
                  <view class="text">18岁</view>
                  <view class="text">80岁</view>
                </view>
              </view>
            </view>

            <view class="form-item">
              <view class="form-label">身高</view>
              <view class="form-value">
                <u-slider
                  min="140"
                  max="200"
                  block-color="rgb(255, 102, 129)"
                  v-model="screeningForm.height"
                  activeColor="rgb(255, 102, 129)"
                  inactiveColor="#ebedf0"
                ></u-slider>
                <view class="tips">
                  <view class="text">140cm</view>
                  <view class="text">200cm</view>
                </view>
              </view>
            </view>

            <view class="form-item">
              <view class="form-label">学历</view>
              <view class="form-value">
                <view class="choose-box">
                  <view
                    :class="['item', schoolingCurrent == index ? 'current' : '']"
                    v-for="(item, index) in schoolingList"
                    :key="index"
                    @click="schoolingClick(item.value, index)"
                  >
                    {{ item.label }}
                  </view>
                </view>
              </view>
            </view>

            <view class="form-item">
              <view class="form-label">月薪</view>
              <view class="form-value">
                <view class="choose-box">
                  <view
                    :class="['item', salaryCurrent == index ? 'current' : '']"
                    v-for="(item, index) in salaryList"
                    :key="index"
                    @click="salaryClick(item.value, index)"
                  >
                    {{ item.label }}
                  </view>
                </view>
              </view>
            </view>

            <view class="form-item">
              <view class="form-label">婚况</view>
              <view class="form-value">
                <view class="choose-box">
                  <view
                    :class="['item', marryCurrent == index ? 'current' : '']"
                    v-for="(item, index) in marryList"
                    :key="index"
                    @click="marryClick(item.value, index)"
                  >
                    {{ item.label }}
                  </view>
                </view>
              </view>
            </view>

            <view class="form-item">
              <view class="form-label">实名认证</view>
              <view class="form-value">
                <view class="choose-box">
                  <view
                    :class="['item', attestationCurrent == index ? 'current' : '']"
                    v-for="(item, index) in attestationList"
                    :key="index"
                    @click="salaryClick(item.value, index)"
                  >
                    {{ item.label }}
                  </view>
                </view>
              </view>
            </view>

            <view class="current-residence">
              <view class="label">现居地</view>
              <view class="area">
                <view class="text">{{ screeningForm.area.name }}</view>
                <u-icon name="arrow-right" size="13" @click="areaSelect"></u-icon>
              </view>
            </view>

            <view class="current-residence">
              <view class="label">户籍地</view>
              <view class="area">
                <view class="text">{{ screeningForm.census.name }}</view>
                <u-icon name="arrow-right" size="13" @click="areaSelect2"></u-icon>
              </view>
            </view>
          </view>
          <view class="form-btn">
            <view class="reset-box" @click="reset">
              <u-icon name="reload" color="#ff6681" size="18"></u-icon>
              <span>重置</span>
            </view>
            <u-button class="search-btn" text="搜索" @click="searchClick"></u-button>
          </view>
        </view>
      </u-popup>

      <personal-information />
    </view>

    <urban-areas ref="urbanAreasRef1" @localConfirm="localConfirm" />
    <urban-areas ref="urbanAreasRef2" @localConfirm="localConfirm2" />
  </diy-container>
</template>

<script>
import urbanAreas from "components/urban-areas/urban-areas";

export default {
  components: { urbanAreas },
  data() {
    return {
      screeningPanel: false,
      screeningForm: {
        age: 26,
        height: 180,
        schooling: 0,
        marry: 0,
        attestation: 0,
        area: {
          code: "0",
          name: "不限"
        },
        census: {
          code: "0",
          name: "不限"
        }
      },
      schoolingList: [
        {
          label: "不限",
          value: 0
        },
        {
          label: "大专及以上",
          value: 1
        },
        {
          label: "本科及以上",
          value: 2
        },
        {
          label: "硕士及以上",
          value: 3
        }
      ],
      salaryList: [
        {
          label: "不限",
          value: 0
        },
        {
          label: "三千以上",
          value: 1
        },
        {
          label: "五千以上",
          value: 2
        },
        {
          label: "八千以上",
          value: 3
        },
        {
          label: "1.2万以上",
          value: 4
        },
        {
          label: "2万以上",
          value: 5
        },
        {
          label: "5万以上",
          value: 6
        }
      ],
      marryList: [
        {
          label: "不限",
          value: 0
        },
        {
          label: "未婚",
          value: 1
        },
        {
          label: "离异",
          value: 2
        }
      ],
      attestationList: [
        {
          label: "不限",
          value: 0
        },
        {
          label: "已实名",
          value: 1
        }
      ],
      schoolingCurrent: 0,
      salaryCurrent: 0,
      marryCurrent: 0,
      attestationCurrent: 0
    };
  },
  onShow() {
    this.screeningPanel = true;
  },
  methods: {
    // 携带条件搜索列表接口即可
    searchClick() {},
    areaSelect() {
      this.$refs.urbanAreasRef1.init();
    },
    areaSelect2() {
      this.$refs.urbanAreasRef2.init();
    },
    localConfirm(e) {
      //显而易见 不多赘述
      this.screeningForm.area.name = `${e.value[0].name}-${e.value[1].name}-${e.value[2].name}`;
      this.screeningForm.area.code = `${e.value[0].code}-${e.value[1].code}-${e.value[2].code}`;
      this.$refs.urbanAreasRef1.hide();
    },
    localConfirm2(e) {
      this.screeningForm.census.name = `${e.value[0].name}-${e.value[1].name}-${e.value[2].name}`;
      this.screeningForm.census.code = `${e.value[0].code}-${e.value[1].code}-${e.value[2].code}`;
      this.$refs.urbanAreasRef2.hide();
    },
    // 婚况处理事件
    marryClick(e, index) {
      this.screeningForm.marry = e;
      this.marryCurrent = index;
    },
    // 薪资处理事件
    salaryClick(e, index) {
      this.screeningForm.salary = e;
      this.salaryCurrent = index;
    },
    // 学历处理事件
    schoolingClick(e, index) {
      this.screeningForm.schooling = e;
      this.schoolingCurrent = index;
    },
    screeningPanelClick() {
      this.screeningPanel = !this.screeningPanel;
    },
    reset() {
      this.screeningForm = {
        age: 26,
        height: 180,
        schooling: 0,
        marry: 0,
        attestation: 0,
        area: {
          code: "",
          name: ""
        }
      };
      this.schoolingCurrent = 0;
      this.salaryCurrent = 0;
      this.marryCurrent = 0;
      this.schoolingCurrent = 0;
    },
    close() {
      this.screeningPanel = false;
    }
  }
};
</script>

<style scoped lang="scss">
.screening-container {
  .screening-content {
    padding: 40rpx;
    height: 1000rpx;
    overflow: auto;
    padding-bottom: 122rpx;
    .form-btn {
      position: absolute;
      bottom: 0;
      left: 0;
      display: flex;
      justify-content: space-between;
      padding: 20rpx 30rpx;
      box-sizing: border-box;
      background-color: #fff;
      border-top: 2rpx solid #eee;
      width: 100%;
      .reset-box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        span {
          font-size: 24rpx;
          color: #b0b2bf;
        }
      }
      .search-btn {
        flex: 1;
        padding: 0;
        background-color: #ff6681;
        border: 0;
        border-radius: 40rpx;
        color: #fff;
        font-size: 4.267vw;
        text-align: center;
        overflow: hidden;
        line-height: 40rpx;
        box-sizing: border-box;
        margin-left: 60rpx;
      }
    }
    .form {
      position: relative;
      .current-residence {
        display: flex;
        justify-content: space-between;
        padding: 20rpx 0;
        .label {
          font-size: 24rpx;
          color: #333;
        }
        .area {
          display: flex;
          align-items: center;
          .text {
            margin-right: 20rpx;
            font-size: 24rpx;
            color: #ff6681;
          }
        }
      }
      .form-item {
        margin-top: 20rpx;
        border-bottom: 2rpx solid #eee;
        .current {
          background: #ffe0e8 !important;
          color: #ff6681 !important;
        }

        .form-label {
          color: #03081b;
          font-size: 26rpx;
          margin: 20rpx 30rpx 0 30rpx;
        }
        .form-value {
          .tips {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 0rpx 30rpx 30rpx 30rpx;
            .text {
              font-size: 24rpx;
              color: #b0b2bf;
            }
          }
          .choose-box {
            display: flex;
            flex-wrap: wrap;
            margin-top: 20rpx;
            .item {
              width: 30%;
              line-height: 70rpx;
              border-radius: 40rpx;
              text-align: center;
              font-size: 28rpx;
              height: 70rpx;
              margin-bottom: 20rpx;
              background: #f8f8f8;
              color: #333;
            }
            .item:nth-child(3n + 2) {
              margin: 0 20rpx;
            }
          }
        }
      }
    }
  }
}
</style>
